import { ElInput, ElButton, ElCheckTag, ElCheckbox } from "element-plus";

function getComponents() {
  return [
    {
      id: "Input",
      render: () => <ElInput></ElInput>,
      preview: () => <ElInput placeholder="我是个文本"></ElInput>,
    },
    {
      id: "Button",
      render: (props: any) => {
        return (
          <ElButton type={props.type} size={props.size} color={props.color}>
            {props.text}
          </ElButton>
        );
      },
      preview: () => <ElButton>我是个按钮</ElButton>,
    },
    {
      id: "CheckTag",
      render: () => <ElCheckTag></ElCheckTag>,
      preview: () => <ElCheckTag>Tag Tag</ElCheckTag>,
    },
    {
      id: "Checkbox",
      render: () => <ElCheckbox></ElCheckbox>,
      preview: () => <ElCheckbox label="CheckBox"></ElCheckbox>,
    },
  ];
}

function getComponentsMap() {
  let map = new Map();
  map.set("Input", {
    id: "Input",
    render: () => <ElInput placeholder="我是个文本"></ElInput>,
    preview: () => <ElInput placeholder="我是个文本"></ElInput>,
  });
  map.set("Button", {
    id: "Button",
    render: (props: any) => {
      return (
        <ElButton type={props.type} size={props.size} color={props.color}>
          {props.text}
        </ElButton>
      );
    },
    preview: () => <ElButton>我是个按钮</ElButton>,
  });
  map.set("CheckTag", {
    id: "CheckTag",
    render: () => <ElCheckTag>Tag Tag</ElCheckTag>,
    preview: () => <ElCheckTag>Tag Tag</ElCheckTag>,
  });
  map.set("Checkbox", {
    id: "Checkbox",
    render: () => <ElCheckbox label="CheckBox"></ElCheckbox>,
    preview: () => <ElCheckbox label="CheckBox"></ElCheckbox>,
  });

  return map;
}

export { getComponents, getComponentsMap };
